
import Taro, {Component} from '@tarojs/taro'
import {View, Text, Image, ScrollView} from '@tarojs/components'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime, pageSize, getCaNumber, subtime} from '../../utils/common'
import { SingleUserMallUsersVOBaoBiaoVO, SingleUserMallUsersVOOrderTj } from '../../api/api'

import FooterMenu from '../../components/FooterMenu'
import '../order/index.less'
import './profit.less'

import noneOrder from "../../assets/img/none_order.png";
import nonePackge from "../../assets/img/none_packge.png";

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class OrderIndex extends Component<IHomeProps> {
  constructor(props){
    super(props)
  }

  state = {
    items: [] as SingleUserMallUsersVOOrderTj[],
    totalCount: 0,
    pageIndex: 1,
    pageSize,
    resNum: {} as SingleUserMallUsersVOBaoBiaoVO,
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '我的收益订单'})
    this.getOrderReport()
  }

  getOrderReport() {
    let { userStore } = this.props.stores
    let { pageIndex, pageSize } = this.state
    userStore.getOrderReport({
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({totalCount: res.orderTj.totalCount, items: res.orderTj.items, resNum: res})
        }else {
          const { items } = this.state;
          items.push(...res.orderTj.items || []);
          this.setState({totalCount: res.orderTj.totalCount, items, resNum: res})
        }
      }
    })
  }

  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getOrderReport()
      })
    }
  }

  link(item: object): void {
    return;
    Taro.setStorageSync('orderDetail', JSON.stringify(item))
    getRuntime().navigateTo('/pages/user/profitOrderDetail?orderId='+item.id)
  }

  render() {
    let { items, resNum } = this.state
    return (
      <View className='order-index'>
        <View className='mine-profit' style={{position: 'unset'}}>
          <View className='mine-profit__header'>
            <View className='line line-item'>
              <View className='item'>
                <Text className='item-tip'>累计收益(元)</Text>
                <Text className='item-money'>{resNum.totalProfit||0}</Text>
              </View>
              <View className='item'>
                <Text className='item-tip'>本月收益(元)</Text>
                <Text className='item-money'>{resNum.thisMonthProfit||0}</Text>
              </View>
              <View className='item'>
                <Text className='item-tip'>上月收益(元)</Text>
                <Text className='item-money'>{resNum.lastMonthProfit||0}</Text>
              </View>
            </View>
            <View className='line line-item ' style={{marginBottom: 0}}>
              <View className='item'>
                <Text className='item-tip'>累计单数</Text>
                <Text className='item-money'>{resNum.totalNum||0}</Text>
              </View>
              <View className='item'>
                <Text className='item-tip'>本月单数</Text>
                <Text className='item-money'>{resNum.thisMonthNum||0}</Text>
              </View>
              <View className='item'>
                <Text className='item-tip'>上月单数</Text>
                <Text className='item-money'>{resNum.lastMonthNum||0}</Text>
              </View>
            </View>
          </View>
        </View>
        <View className='order-main'>
          {items.length<=0&&
          <View className='none'>
             <Image className='none-icon' src={noneOrder} />
             <View className='none-tips'>您暂时还没有订单！</View>
          </View>
          }
          {items.length > 0 &&
          <View className='list-01'>
            {
              items.map(item => {
                  let tpl =  <View className='list-01__item' onClick={this.link.bind(this, item)}>
                    <View className='list-01__line'>
                      <View className='list-01__title'>
                        <Text className='list-01__spec'>订单号：{item.orderNo}</Text>
                       {/* <Text className='list-01__spec'>{item.userName}</Text>*/}
                      </View>
                      <View className='list-01__price color-theme' style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
                        <Text>收益：</Text>
                        <Text className='small color-theme'> ￥</Text>
                        <Text className='price color-theme'>{item.profit}</Text>
                      </View>
                    </View>
                    <View className='list-01__line'>
                      <View className='list-01__carId color-theme' style={{width: '140px'}}>用户名：{item.nickName}</View>
                      <View className='list-01__date font-dark'>创建时间：{subtime(item.payTime)}</View>
                    </View>
                  </View>
                return tpl
              })
            }
          </View>
          }
        </View>
      </View>
    )
  }
}

export default OrderIndex
